<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <body>
        <ui:composition template="../templates/default3.xhtml">  
            <ui:define name="content">
                <h:form id="simpleForecast" binding="#{salesForecastManagerBean.loadSimpleForecast}">

                    <p:messages id="error"/>


                    <p:panel header="Sales historial data - #{salesForecastManagerBean.selectedProduct.name}" >
                        <p:dataTable id="salesHistorydt" var="salesHistory" value="#{salesForecastManagerBean.salesHistories}" 
                                     emptyMessage="No sales history found with given criteria." paginator="true" rows="6"  
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} " >
                            <p:column filterBy="#{salesHistory.salesMonth}" headerText="#{salesForecastManagerBean.aggregate}" 
                                      filterMatchMode="contains" sortBy="#{salesHistory.salesMonth}" style="width:40%">  
                                <center><h:outputText value="#{salesHistory.salesMonth}"/> </center>
                            </p:column> 
                            <p:column filterBy="#{salesHistory.salesYear}" headerText="Year" 
                                      filterMatchMode="contains" sortBy="#{salesHistory.salesYear}" style="width:40%">  
                                <center><h:outputText value="#{salesHistory.salesYear}"/> </center>
                            </p:column> 

                            <p:column  headerText="Demand" >  
                                <center> <h:outputText value="#{salesHistory.quantity}"/> </center>
                            </p:column> 

                             <p:columnGroup type="footer">  
                                <p:row>  
                                    <p:column colspan="2" footerText="Demand mean:" style="text-align:right"/>
                                    <p:column footerText="#{salesForecastManagerBean.salesMeanHistory}"/>
                              
                                    </p:row>   
                                  <p:row> 
                                    <p:column colspan="2" footerText="Demand median:" style="text-align:right"/>
                                    <p:column footerText="#{salesForecastManagerBean.salesMedianHistory}"/>
                               
                                    </p:row>  
                                  <p:row> 
                                    <p:column colspan="2" footerText="Demand Total:" style="text-align:right"/>
                                    <p:column footerText="#{salesForecastManagerBean.salesTotalHistory}"/>
                                  
                                    </p:row>   
                                
                            </p:columnGroup>  
                            

                        </p:dataTable>

                    </p:panel>



                    <p:panel header="Graphical representation" >
                        <p:lineChart var ="chart" id="salesHistoryChart" model="#{salesForecastManagerBean.model}" width ="800px"
                                     titleX ="#{salesForecastManagerBean.aggregate}" titleY="Sales Request">
                            <p:chartSeries label="Historical data" value="#{chart.demandCurrentYear}" />
                            <p:chartSeries label="Forecast demand #{salesForecastManagerBean.forecastYear}" value="#{chart.demandForecastYear}" />
                        </p:lineChart>
                    </p:panel>

                       <p:panel header="Current forecast plan (#{salesForecastManagerBean.forecastYear})" id="forecastDisplay">

                        
                           <p:dataTable id="salesForecasts" var="salesForecast" value="#{salesForecastManagerBean.salesForecasts}" 
                                     emptyMessage="No sales forecast found with given criteria." selection="#{salesForecastManagerBean.selectedForecast}"
                                     selectionMode="single"  paginator="true" rows="6"  
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}" >
                           
              
                               <p:column filterBy="#{salesForecast.salesMonth}" headerText="#{salesForecastManagerBean.aggregate}" 
                                      filterMatchMode="contains" sortBy="#{salesForecast.salesMonth}" >  
                                <center><h:outputText value="#{salesForecast.salesMonth}"/></center> 
                            </p:column> 
                          
                            <p:column  headerText="Monthly sales forecast" >  
                                <center> <h:outputText value="#{salesForecast.quantity}"/> </center>
                            </p:column> 
                            <p:column  headerText="Status" >  
                               <center> <h:outputText value="#{salesForecast.status}"/> </center>
                            </p:column> 
                            <p:column  headerText="Remark" >  
                               <center> <h:outputText value="#{salesForecast.remark}"/> </center>
                            </p:column> 
                          

                        </p:dataTable>

                           
                        <center><p:commandButton id="btnRemove" value="Remove" actionListener="#{salesForecastManagerBean.removeForecastPlan}" ajax="true" update="error" />
                        </center>
                    </p:panel>




                    <p:panel header="Forecast input" id="forecastInput">

                        <table>
                            <tr>
                                <td>
                                    Forecasting month 
                                </td>
                                <td>
                                    <h:selectOneMenu rendered ="#{salesForecastManagerBean.addMonth}" id="selectOneM" value="#{salesForecastManagerBean.selectedMonth}">
                                        <f:selectItem itemLabel="Jan #{salesForecastManagerBean.forecastYear}" itemValue="1" />
                                        <f:selectItem itemLabel="Feb #{salesForecastManagerBean.forecastYear}" itemValue="2" />
                                        <f:selectItem itemLabel="Mar #{salesForecastManagerBean.forecastYear}" itemValue="3" />
                                        <f:selectItem itemLabel="Apr #{salesForecastManagerBean.forecastYear}" itemValue="4" />
                                        <f:selectItem itemLabel="May #{salesForecastManagerBean.forecastYear}" itemValue="5" />
                                        <f:selectItem itemLabel="Jun #{salesForecastManagerBean.forecastYear}" itemValue="6" />
                                        <f:selectItem itemLabel="July #{salesForecastManagerBean.forecastYear}" itemValue="7" />
                                        <f:selectItem itemLabel="Aug #{salesForecastManagerBean.forecastYear}" itemValue="8" />
                                        <f:selectItem itemLabel="Sep #{salesForecastManagerBean.forecastYear}" itemValue="9" />
                                        <f:selectItem itemLabel="Oct #{salesForecastManagerBean.forecastYear}" itemValue="10" />
                                        <f:selectItem itemLabel="Nov #{salesForecastManagerBean.forecastYear}" itemValue="11" />
                                        <f:selectItem itemLabel="Dec #{salesForecastManagerBean.forecastYear}" itemValue="12" />
                                    </h:selectOneMenu> 
                                    <h:selectOneMenu rendered="#{salesForecastManagerBean.addQuarter}" id="selectOneQ" value="#{salesForecastManagerBean.selectedMonth}">
                                        <f:selectItem itemLabel="Q1 #{salesForecastManagerBean.forecastYear}" itemValue="1" />
                                        <f:selectItem itemLabel="Q2 #{salesForecastManagerBean.forecastYear}" itemValue="2" />
                                        <f:selectItem itemLabel="Q3 #{salesForecastManagerBean.forecastYear}" itemValue="3" />
                                        <f:selectItem itemLabel="Q4 #{salesForecastManagerBean.forecastYear}" itemValue="4" />

                                    </h:selectOneMenu> 
                                    <h:selectOneMenu rendered ="#{salesForecastManagerBean.addYear}" id="selectOneY" value="#{salesForecastManagerBean.selectedMonth}">
                                        <f:selectItem itemLabel="#{salesForecastManagerBean.forecastYear}" itemValue="1" />
                                    </h:selectOneMenu> 
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    Sales forecast (Plan):

                                </td>
                                <td>
                                    <p:inputText id ="quantity" value="#{salesForecastManagerBean.quantity}" />
                                </td>
                            </tr>
                            <tr>
                                <td valign ="top">
                                    Remark:
                                </td>
                                <td>
                                    <p:inputTextarea id="remark"  style="width:300px;height:100px;" effectDuration="400" value="#{salesForecastManagerBean.remark}">    
                                    </p:inputTextarea>
                                </td>
                            </tr>
                            <tr>
                                <td>

                                </td>
                                <td>
                                    <p:commandButton id="btnAdd" value="Add" actionListener="#{salesForecastManagerBean.addForecastPlan}" ajax="true" update="error" />
                                </td>
                            </tr>
                        </table>




                        <hr/>
                        <center>
                            <p:commandButton id="btnDone" value="Done" actionListener="#{salesForecastManagerBean.done}" ajax="true" update="error" />
                        </center>
                    </p:panel>


                        <p:dialog modal="true" widgetVar="statusDialog" header="Please wait..."   
                          draggable="false" closable="false" resizable="false" >
                    
                    
                    <p:graphicImage value="../resources/images/ajaxloadingbar.gif" /> 
                    </p:dialog>
                    
                </h:form>
            </ui:define>
        </ui:composition>
    </body>
</html>